<template>
  <div style="width:100%">
  <el-select id="select_namespaces" v-model="query_namespaces" filterable multiple placeholder="Select Namespaces" 
  :fit-input-width="true"
  :clearable="true"
  style="width:100%">
    <el-option  
      v-for="item in namespaces"
      :key="item.metadata.name"
      :label="item.metadata.name"
      :value="item.metadata.name"
    >
    </el-option>
  </el-select>
  </div>
</template>
<script>

import { computed ,ref} from 'vue'
import  useNamespaceStore  from '@/store/k8s/namespace.js'
import emitter from '@/eventbus';

export default {
  name: "NamespaceDropDown",
  props: {},
  watch:{
     query_namespaces(newValue, oldValue){
       emitter.emit("query_namespaces", newValue);
     }
  },
  setup() {
    const namespace_store = useNamespaceStore()
    const query_namespaces=ref([])
    return {
      // state 和 getter 都需要在使用 computed，这和 Options Api 一样
      namespaces: computed(() =>{ 
          return namespace_store.namespaces
      
      }),
      query_namespaces,
      get_query_namespaces : () =>{
         return  query_namespaces.value||[]
      }
    }
  },
};
</script>
